<script setup>
import { onMounted, ref, markRaw } from 'vue'
import Header from '@/views/content/util/header.vue'
import { ElButton, ElTableColumn, ElTable, ElLink, ElTabs, ElTabPane, ElInput, ElSelect, ElOption, ElMessage, } from 'element-plus'
import NumberCard from '@/views/content/util/numberCard.vue'
import DateScopeSelect from '@/views/content/util/date/dateScopeSelect.vue'

const storeListName = ref([{ name: '浆·小白' }])
const selectStore = ref('浆·小白')

const activeName = ref('余额流水记录')
const tabPositionOrderByDateScopeBalance = ref("全部")//日期
const tabPositionOrderByDateScopeGuarantee = ref("全部")//日期

const selectHandle = () => {

}

</script>

<template>
    <div class="content-dealRecord">
        <div>
            <Header title="账户信息"></Header>
        </div>
        <div class="select-grop">
            <div class="store-select">
                <div>选择店铺： </div>
                <el-select v-model="selectStore" @change="selectHandle" placeholder="请选择店铺">
                    <el-option v-for="item in storeListName" :label=item.name :value=item.name />
                </el-select>
            </div>
            <div style="display: flex;">
                <div style="margin-top: 20px;width: 300px;;">
                    <el-statistic :value="'1500.00'" precision="2" prefix="" value-style="font-size:30px">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                可提现金额
                                <el-tooltip effect="dark" content="账户目前金额，可提现" placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>

                    <el-button type="primary" style="margin-top: 10px;">提现</el-button>
                </div>
                <div style="margin-top: 20px;width: 300px;">
                    <el-statistic :value="'500.00'" precision="2" prefix="" value-style="font-size:30px">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                履约保证金
                                <el-tooltip effect="dark" content="商户与平台合约保证金" placement="top">
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>


                </div>
            </div>

            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="余额流水记录" name="余额流水记录">
                        <div style="display: flex;">
                            <el-radio-group v-model="tabPositionOrderByDateScopeBalance" class="button-grop">
                                <el-radio-button label="全部">全部</el-radio-button>
                                <el-radio-button label="今天">今天</el-radio-button>
                                <el-radio-button label="近七天">近七天</el-radio-button>
                                <el-radio-button label="近十五天">近十五天</el-radio-button>
                                <el-radio-button label="近三十天">近三十天</el-radio-button>
                                <el-radio-button label="具体日期">自定义</el-radio-button>
                            </el-radio-group>

                            <div>
                                <DateScopeSelect></DateScopeSelect>
                            </div>

                            

                        </div>
                        <div class="order-list">
                                <el-table style="width: 98%;" 
                                :header-cell-style="{ background: 'rgb(243, 243, 243)', color: '#606266' }"
                                >
                                    <el-table-column label="申请时间/订单号"></el-table-column>
                                    <el-table-column label="提现方式"></el-table-column>
                                    <el-table-column label="账户信息"></el-table-column>
                                    <el-table-column label="提现金额"></el-table-column>
                                    <el-table-column label="手续费"></el-table-column>
                                    <el-table-column label="到账金额"></el-table-column>
                                    <el-table-column label="提现状态"></el-table-column>
                                    <el-table-column label=""></el-table-column>
                                    <el-table-column label="操作"></el-table-column>
                                </el-table>
                                <Limit></Limit>
                            </div>


                    </el-tab-pane>

                    <el-tab-pane label="履约保证金流水记录" name="履约保证金流水记录">

                        <div style="display: flex;">
                            <el-radio-group v-model="tabPositionOrderByDateScopeGuarantee" class="button-grop">
                                <el-radio-button label="全部">全部</el-radio-button>
                                <el-radio-button label="今天">今天</el-radio-button>
                                <el-radio-button label="近七天">近七天</el-radio-button>
                                <el-radio-button label="近十五天">近十五天</el-radio-button>
                                <el-radio-button label="近三十天">近三十天</el-radio-button>
                                <el-radio-button label="具体日期">自定义</el-radio-button>
                            </el-radio-group>

                            <div>
                                <DateScopeSelect></DateScopeSelect>
                            </div>

                            
                        </div>
                       

                    </el-tab-pane>



                </el-tabs>
            </div>




        </div>

    </div>
</template>



<style  scoped>
::v-deep .el-table th>.cell {
    color: black;
}

.content-dealRecord {}

.select-grop {
    margin-left: 20px;
}

.store-select {

    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.screen {

    display: flex;
    align-items: center;
    margin-top: 10px;
}

.order-list{
    margin-top: 20px;
}
.button-grop {}
</style>